<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="300px">
                <el-button type="primary" :icon="View" @click="seeClip">查看</el-button>
                <el-empty v-show="clipBoard == '对方还没开放剪贴板权限'" description="点击按钮查看剪贴板内容"></el-empty>
                <div v-show="clipBoard != '对方还没开放剪贴板权限'">{{ clipBoard }}</div>
            </el-aside>

            <el-main>
                <el-timeline v-for="(item, index) in history" :key="index">
                    <el-timeline-item :timestamp="item.time">
                        {{ item.message }}
                        <el-button type="success" :icon="CopyDocument">复制</el-button>
                    </el-timeline-item>
                </el-timeline>
                <el-backtop :bottom="100" />
            </el-main>

            <el-aside width="320px">
                <el-space direction="vertical">
                    <el-row v-for="(item, index) in ips" :key="index">
                        <el-col :span="15">
                            <el-text>{{ item.ip }}</el-text>
                        </el-col>
                        <el-col :span="5">
                            <el-button type="danger" :icon="Service" @click="askClip(item.ip)">询问</el-button>
                        </el-col>
                    </el-row>
                </el-space>
            </el-aside>

            <el-dialog v-model="offDialog" title="警告" width="30vw">
                <span>
                    与服务器的连接受迫断开, 请按下Ctrl R 重新连接
                </span>
                <template #footer>
                    <el-button @click="offDialog = false" :icon="Pointer">确认</el-button>
                </template>
            </el-dialog>
        </el-container>
    </div>
</template>

<script setup lang='ts'>
import { CopyDocument, Pointer, Service, View } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { io } from 'socket.io-client'
import moment from 'moment'
import { ElMessage } from 'element-plus'
import { useCookies } from "vue3-cookies"
import { v4 as uuidv4 } from "uuid";


interface IP {
    ip: string
}

interface Record {
    ip: string,
    time: string,
    message: string,
}

let clipBoard = ref("对方还没开放剪贴板权限")
let ip_to: string
let ips = reactive<IP[]>([])
let history = reactive<Record[]>([])
let offDialog = ref(false)
let ipServer = ref("https://127.0.0.1:3000")
let uid: string


const { cookies } = useCookies()

uid = cookies.get("clip-id")
if (uid === null) {
    uid = uuidv4()
    cookies.set("clip-id", uid)
}

const socket = io(ipServer.value, {
    reconnection: false,
    query: { uid: uid }
})

async function seeClip() {
    clipBoard.value = await navigator.clipboard.readText()
}

async function askClip(ip: string) {
    ip_to = ip
    socket.emit("ask", ip)
}


// try {
//     const { value } = await ElMessageBox.prompt(
//         "请输入要连接的服务器URL",
//         "初始化", {
//         confirmButtonText: '提交',
//         inputPattern: /(?:https?:\/\/)?(?:[@\/\n]+@)?(?:www.)?([^:\/?\n]+)(?::\d+)?\/?([^?\n]+)?\??([^#\n]+)?#?([^?\n]+)?/,
//         inputErrorMessage: '该URL格式不正确'
//     })
//     ipServer.value = value
// }
// catch (err) {
//     ElMessage({
//         message: '启用默认URL https://127.0.0.1:3000',
//         type: 'warning'
//     })
// }


socket.on("connect", () => { console.log("connected") })

socket.on("connect_error", () => {
    offDialog.value = true
})

socket.on("greet", (doc: IP[]) => {
    ips.push(...doc)
})

socket.on("answer", answer => {
    clipBoard.value = answer.clip
    ElMessage({
        message: '已复制到剪贴板',
        type: 'success',
    })

    history.push({
        ip: ip_to,
        time: moment().format(),
        message: answer.clip,
    })
})

socket.on("ask", ask => {
    socket.emit("answer", {
        clip: clipBoard.value,
        ip_to: ask.ip_from
    })
})
</script>

<style lang='scss' scoped></style>
    